<template>
	<view class="tianjia_ka">
		<view class="list">
			
			<view class="info_list">
				<view class="info">数量</view>
				<input class="input" type="text" value="" v-model="num" placeholder="请填写数量" placeholder-style="color:#a5a5a5;"/>
			</view>
			<view class="info_list">
				<view class="info">手机号</view>
				<input class="input" type="text" value="" v-model="phone" placeholder="请填写手机号" placeholder-style="color:#a5a5a5;"/>
			</view>
			
		</view>
		<view class="qd_btn" @click="surepass">提交</view>
		<view class="layer_box_pass" v-show="ispLayer">
			<view class='lay_tit' >
				<view class="title1" >
					<view>输入密码</view>
					<view @click="closep">关闭</view>
				</view>
				<view class="title">
					<input v-model="pass" type="password" style="width:100%;height: 90rpx;background: #cccccc;padding: 20rpx;">
				</view>
				<view class="title2" >
					<view style="width:100%;" @click="surepass">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				num:'',
				phone:'',
				userinfo:[],
				ispLayer:false,
				pass:'',
				type:2
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
			    title: '转账'
			});
			this.type = options.type;
			this.userinfo=uni.getStorageSync('user');
		},
		methods: {
			sub(){
				if(this.num<=0){
					uni.showToast({
						icon:'none',
						title:'请输入金额'
					})
					return;
				}
				this.ispLayer = true;
			},
			surepass(){
				// if(this.pass==''||this.pass==null||this.pass==undefined){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入密码'
				// 	})
				// 	return;
				// }
				var that=this;
				if(this.type == 1){
					this.$http.get('user/balanceHuzhuan',{'userPhone':that.phone,num:that.num}).
					then(function (response) {
						uni.showToast({
							icon:'none',
							title:response.msg
						})
						that.ispLayer = false;
						var clock=setInterval(function(){
							clearInterval(clock);
							uni.navigateBack();
						},1500);
					}).catch(function (error) {
						console.log(error);
					});
				}else{
					this.$http.get('user/coinHuzhuan',{'userPhone':that.phone,num:that.num}).
					then(function (response) {
						uni.showToast({
							icon:'none',
							title:response.msg
						})
						that.ispLayer = false;
						var clock=setInterval(function(){
							clearInterval(clock);
							uni.navigateBack();
						},1500);
					}).catch(function (error) {
						console.log(error);
					});
				}
				
			},
			closep(){
				this.ispLayer=false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.tianjia_ka{
		width: 100%;
		.list{
			padding: 0 30rpx;
			.info_list1{
				padding: 30rpx 0;
				display: flex;
				// align-items: center;
				border-bottom:1px solid #e5e5e5;
				.info{
					margin-right: 20rpx;
					text-align-last: justify;
					width: 140rpx;
					color: #3b3b3b;
					font-size: 30rpx;
				}
				.list{
					margin-left: 70rpx;
					.list_con{
						display: flex;
						.info1{
							display: flex;
							align-items: center;
							padding-left: 50rpx;
							.left{
								align-items: center;
								display: flex;
								font-size: 30rpx;
								color: #3b3b3b;
							}
						}
					}
				}
				.input{
					flex: 1;
					font-size: 28rpx;
					color: #a5a5a5;
				}
				.right{
					width: 540rpx;
					color: #a5a5a5;
					font-size: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.r_left{
						.name{
							color: #454545;
						}
						.r_l_img{
							width: 28rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
					.s_img{
						width: 20rpx;
						height: 30rpx;
					}
				}
			}
			.info_list{
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom:1px solid #e5e5e5;
				.info{
					margin-right: 20rpx;
					text-align-last: justify;
					width: 140rpx;
					color: #3b3b3b;
					font-size: 30rpx;
				}
				.list{
					margin-left: 70rpx;
					.list_con{
						display: flex;
						.info1{
							height:100rpx;
							display: flex;
							align-items: center;
							padding-left: 50rpx;
							.left{
								height: 100rpx;
								align-items: center;
								display: flex;
								font-size: 30rpx;
								color: #3b3b3b;
							}
						}
					}
				}
				.input{
					flex: 1;
					font-size: 28rpx;
					color: #a5a5a5;
				}
				.right{
					width: 540rpx;
					color: #a5a5a5;
					font-size: 30rpx;
					display: flex;
					justify-content: space-between;
					height: 100rpx;
					align-items: center;
					.r_left{
						display: flex;
						height: 100rpx;
						align-items: center;
						.r_l_img{
							width: 28rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
					.s_img{
						width: 20rpx;
						height: 30rpx;
					}
				}
			}
		}
		.qd_btn{
			margin: 200rpx auto 0;
			text-align: center;
			width: 670rpx;
			height: 90rpx;
			background: #102d57;
			color: #fff;
			line-height: 90rpx;
			font-size: 36rpx;
			border-radius: 45rpx;
		}
	}
.layer_box_pass{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.lay_tit{
		width: 80%;
		height: 350rpx;
		background: #ffffff;
		position: fixed;
		bottom: 50%;
		border-radius: 10rpx;
		.title{
			display: flex;
			flex-wrap: nowrap;
			height:130rpx;
			line-height: 130rpx;
			font-size: 35rpx;
			.coin{
				margin: auto 0;
				width:100rpx;
				height:100rpx;
			}
		}
		.title1{
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 2px solid #988f8f;
		}
		.title2{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			text-align: center;
		}
	}
	.lay_tit1{
		height: 400rpx;
	}
}
</style>
